<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="当前总持仓" name="nowPosition">
      <NowPosition :currency="currency" v-if="NowPositionTemp"/>
    </el-tab-pane>

    <el-tab-pane label="当前委托" name="nowDelegate">
      <NowDelegate :currency="currency" v-if="NowDelegateTemp"/>
    </el-tab-pane>

    <el-tab-pane label="历史委托" name="historyDelegate">
      <HistoryDelegate :currency="currency" v-if="HistoryDelegateTemp"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import NowDelegate from './DealFooterCom/NowDelegate'
  import HistoryDelegate from './DealFooterCom/HistoryDelegate'
  import NowPosition from './DealFooterCom/NowPosition'

  export default {
    name: "DealFooter",
    props: ['currency'],
    components: {
      NowPosition,
      NowDelegate,
      HistoryDelegate,
    },
    data() {
      return {
        activeName: 'nowPosition',
        NowPositionTemp: true,
        NowDelegateTemp: false,
        HistoryDelegateTemp: false,
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      NowPositionReload(val) {
        // 移除组件
        this.NowPositionTemp = false
        // 在组件移除后，重新渲染组件
        this.$nextTick(() => {
          this.NowPositionTemp = true
        })
      },
      // 当日委托组件强行刷新
      NowDelegate(val) {
        this.NowDelegateTemp = false
        this.$nextTick(() => {
          this.NowDelegateTemp = true
        })
      },
      // 历史委托组件强行刷新
      HistoryDelegate(val) {
        this.HistoryDelegateTemp = false
        this.$nextTick(() => {
          this.HistoryDelegateTemp = true
        })
      },
    },

    watch: {
      activeName: function (newVal, oldVal) {
        // TO DO
        console.log("newVal:", newVal);
        console.log("oldVal:", oldVal);
        switch (newVal) {
          case 'nowPosition':
            this.NowPositionReload()
            break;
          case 'nowDelegate':
            this.NowDelegate()
            break;
          case 'historyDelegate':
            this.HistoryDelegate()
            break;
        }
      }
    }
  }
</script>

<style scoped>

</style>

